<template>
  <div v-loading="loading">
    <div v-if="$labProcess.info.activityState === 'runing'" style="display: flex;flex-flow: row nowrap;justify-content: flex-start;align-items: center">
      <el-button v-if="$labProcess.info.nexts && $labProcess.info.nexts.length > 0" :loading="processIng" icon="el-icon-user" type="primary" @click="openAssign" style="margin-right: 2px;margin-left: 0">分配</el-button>
      <el-button style="margin-right: 2px;margin-left: 0" icon="iconfont icon-submit-up" :loading="processIng" type="success" @click="() => { flowArgs('submit')}">提交</el-button>
      <template v-if="$labProcess.info.backs && $labProcess.info.backs.length">
        <el-select v-model="$labProcess.info.goActivity" style="width: 300px;margin-right: 2px;" placeholder="选择退回节点">
          <el-option v-for="item in $labProcess.info.backs" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
        <el-button style="margin-right: 2px;margin-left: 0" icon="iconfont icon-back-one" :loading="processIng" type="warning" @click="() => { flowArgs('back')}">退回</el-button>
      </template>
    </div>
    <el-table v-loading="loading" ref="tableRef" :data="dataSource" @row-click="handleRowClick" border stripe :height="autoHeight"
              @select="selectSingle" @select-all="selectAll" @selection-change="selectAll">
      <el-table-column type="index" width="50px" align="center" label="序号"></el-table-column>
      <el-table-column type="selection" width="50px" align="center" label="选择"></el-table-column>
      <el-table-column v-for="item in columns" :key="item.jdbcAlias" :prop="item.jdbcAlias" :label="item.jdbcComment || item.jdbcName" align="center">
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
        </template>
      </el-table-column>
    </el-table>

    <div class="lab-table-page">
      <div style="display: inline-flex">
        <el-pagination
            :disabled="loading"
            :current-page="pageInfo.page"
            :page-sizes="[5, 10, 15, 20, 50, 100]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, jumper"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <el-button-group style="padding: 2px 5px">
          <el-button icon="el-icon-refresh" title="刷新" :disabled="loading" @click="loadSource([])" />
        </el-button-group>
      </div>
    </div>

    <el-dialog :title="'选择执行人'" :visible="visible" append-to-body width="80%" @close="visible = false">
      <div>
        <el-select v-model="activityType">
          <el-option v-for="item in $labProcess.info.nexts" :key="item.id" :value="item.id" :label="item.name" />
        </el-select>
        <el-tabs v-model="activeName">
          <el-tab-pane label="选择用户" name="user" lazy>
            <user-branch @rowSelect="selectObj" />
          </el-tab-pane>
          <el-tab-pane label="选择岗位" name="job" lazy>
            <job-table select @rowSelect="selectObj" />
          </el-tab-pane>
          <el-tab-pane label="选择角色" name="role" lazy>
            <role-table select @rowSelect="selectObj" />
          </el-tab-pane>
          <el-tab-pane label="选择部门" name="group" lazy>
            <branch-table @rowSelect="selectObj" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";
import UserBranch from "@/views/system/user/UserBranch";
import JobTable from "@/views/system/job/JobTable";
import RoleTable from "@/views/system/role/RoleTable";
import BranchTable from "@/views/system/group/BranchTable";
import ProcessData from "@/views/system/process/ProcessData";
import LabBase from "@/mixins/LabBase";

export default {
  name: "ProcessAssign",
  components: {ProcessData, BranchTable, RoleTable, JobTable, UserBranch},
  mixins: [IdeaTable, LabBase],
  data () {
    return {
      activeName: 'user',
      labModel: {},
      columns: [],
      activityType: '',
      processIng: false
    }
  },
  computed: {
    autoHeight() {
      return this.$labProcess.info.activityState === 'runing' ? `calc(100vh - 160px)` : `calc(100vh - 130px)`
    }
  },
  created() {
    this.loadModel()
  },
  methods: {
    loadModel() {
      this.loading = true
      const { todoId, process, processDefId, mainValue, activityType, activityState, keys, allStep } = this.$labProcess.info
      if (!todoId && !processDefId) {
        this.loading = false
        return
      }
      if (!process) {
        this.$resultMsg(this, { msg: '未获取到流程'})
        this.loading = false
        return
      }
      this.loading = true
      const { subPrimary } = process
      this.columns.splice(0, this.columns.length)
      this.columns.push({jdbcAlias: 'activityLabel', jdbcComment: '业务名称'})
      const nodeExtend = this.appInfo.envs[activityType] || {}
      if (nodeExtend.columns && nodeExtend.columns.length > 0) {
        nodeExtend.columns.forEach(item => {
          const index = this.columns.findIndex(f => f.jdbcAlias === item.jdbcAlias)
          if (index === -1) {
            this.columns.push(item)
          }
        })
      }
      allStep.forEach(item => {
        this.columns.push({jdbcAlias: item.id, jdbcComment: item.name})
      })

      this.rowKey = subPrimary
      this.pageInfo.processDefId = processDefId
      this.pageInfo.mainValue = mainValue
      this.pageInfo.activityType = activityType
      this.pageInfo.activityState = activityState
      this.pageInfo.subValues = keys
      this.queryUrl = 'process/queryAssign'
      this.tableRef = 'tableRef'
      this.loadSource()
    },
    openAssign() {
      const { selectRowIds } = this
      if (selectRowIds.length === 0) {
        this.$resultMsg(this, { msg: '请选择需要配置的业务'})
        return
      }
      this.visible = true
    },
    selectObj(row){
      if (!this.activityType) {
        this.$resultMsg(this, { msg: '请选择分配的节点'})
        return
      }
      const { processDefId, mainValue } = this.$labProcess.info
      const select = {
        assignValue: '',
        assignLabel: '',
        assignType: this.activeName,
        processDefId: processDefId,
        mainValue: mainValue,
        activityType: this.activityType,
        subValues: this.selectRowIds
      }
      if (this.activeName === 'user') {
        this.$set(select, 'assignValue', row.userId)
        this.$set(select, 'assignLabel', row.nickName)
      } else if (this.activeName === 'job') {
        this.$set(select, 'assignValue', row.jobId)
        this.$set(select, 'assignLabel', row.jobName)
      } else if (this.activeName === 'role') {
        this.$set(select, 'assignValue', row.roleId)
        this.$set(select, 'assignLabel', row.roleName)
      } else if (this.activeName === 'group') {
        this.$set(select, 'assignValue', row.branchId)
        this.$set(select, 'assignLabel', row.groupAllName)
      }
      this.$post('/process/assign', select)
          .then(res => {
            this.$resultMsg(this, res)
            if (res.code === 200) {
              this.loadSource()
            }
          })
    },
    flowArgs(type) {
      const { todoId, processDefId, mainValue, activityType, goActivity } = this.$labProcess.info
      const args = { todoId, processDefId, mainValue, subValues: this.selectRowIds, activityType, goActivity }
      this.processIng = true
      this.$post('/process/' + type + '?appId=' + this.appInfo.appId, args)
          .then(res => {
            this.$resultMsg(this, res)
            if (res.code === 200) {
              // this.loadSource()
              this.$LabWeb.refreshTag(this.$route.path)
            }
            setTimeout(() => {
              this.processIng = false
            }, 300)
          })
    }
  }
}
</script>

<style scoped>

</style>
